<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定class属性实现日历效果</title>
</head>

<style>
  body {
    text-align: center;
  }

  .date-wrap {
    width: 510px;
    border: 2px solid #4e6ef2;
    padding: 15px 0;
    border-radius: 16px;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
  }

  .date-wrap > div {
    width: 60px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    margin: 2px;
  }

  .date-wrap > div:hover {
    border: 2px solid #BDBFC8;
  }

  .date-wrap > div.head {
    font-weight: bold;
    height: 40px;
  }

  .date-wrap > div span:first-child {
    font-size: 18px;
  }

  .date-wrap > div span:last-child {
    font-size: 12px;
  }

  /* 定义绑定的类样式 */
  .date-wrap > div.notCurMonth {
    opacity: 0.4;
  }

  .date-wrap > div.curDay {
    border: 2px solid #4E6EF2;
  }
</style>
<body>
  <div id="app">
    <h2>2025年8月</h2>
    <div class="date-wrap">
      <div class="head">一</div>
      <div class="head">二</div>
      <div class="head">三</div>
      <div class="head">四</div>
      <div class="head">五</div>
      <div class="head">六</div>
      <div class="head">日</div>
      <!-- 日期 -->
      <div date="2025-7-26" ><span>26</span><span>十七</span></div>
      <div date="2025-7-27" ><span>27</span><span>十八</span></div>
      <div date="2025-7-28" ><span>28</span><span>十九</span></div>
      <div date="2025-7-29" ><span>29</span><span>二十</span></div>
      <div date="2025-7-30" ><span>30</span><span>廿一</span></div>
      <div date="2025-7-31" ><span>31</span><span>廿二</span></div>
      <div date="2025-8-1" ><span>1</span><span>建军节</span></div>
      <div date="2025-8-2" ><span>2</span><span>火把节</span></div>
      <div date="2025-8-3" ><span>3</span><span>男人节</span></div>
      <div date="2025-8-4" ><span>4</span><span>廿六</span></div>
      <div date="2025-8-5" ><span>5</span><span>廿七</span></div>
      <div date="2025-8-6" ><span>6</span><span>廿八</span></div>
      <div date="2025-8-7" ><span>7</span><span>立秋</span></div>
      <div date="2025-8-8" ><span>8</span><span>初一</span></div>
      <div date="2025-8-9" ><span>9</span><span>初二</span></div>
      <div date="2025-8-10" ><span>10</span><span>末伏</span></div>
      <div date="2025-8-11" ><span>11</span><span>初四</span></div>
      <div date="2025-8-12" ><span>12</span><span>初五</span></div>
      <div date="2025-8-13" ><span>13</span><span>初六</span></div>
      <div date="2025-8-14" ><span>14</span><span>七夕节</span></div>
      <div date="2025-8-15" ><span>15</span><span>初八</span></div>
      <div date="2025-8-16" ><span>16</span><span>初九</span></div>
      <div date="2025-8-17" ><span>17</span><span>初十</span></div>
      <div date="2025-8-18" ><span>18</span><span>十一</span></div>
      <div date="2025-8-19" ><span>19</span><span>十二</span></div>
      <div date="2025-8-20" ><span>20</span><span>出伏</span></div>
      <div date="2025-8-21" ><span>21</span><span>十四</span></div>
      <div date="2025-8-22" ><span>22</span><span>中元节</span></div>
      <div date="2025-8-23" ><span>23</span><span>处暑</span></div>
      <div date="2025-8-24" ><span>24</span><span>十七</span></div>
      <div date="2025-8-25" ><span>25</span><span>十八</span></div>
      <div date="2025-8-26" ><span>26</span><span>十九</span></div>
      <div date="2025-8-27" ><span>27</span><span>二十</span></div>
      <div date="2025-8-28" ><span>28</span><span>廿一</span></div>
      <div date="2025-8-29" ><span>29</span><span>廿二</span></div>
      <div date="2025-8-30" ><span>30</span><span>廿三</span></div>
      <div date="2025-8-31" ><span>31</span><span>廿四</span></div>
      <div date="2025-9-1" ><span>1</span><span>廿五</span></div>
      <div date="2025-9-2" ><span>2</span><span>廿六</span></div>
      <div date="2025-9-3" ><span>3</span><span>廿七</span></div>
      <div date="2025-9-4" ><span>4</span><span>廿八</span></div>
      <div date="2025-9-5"><span>5</span><span>廿九</span></div>
    </div>
  </div>
</body>

</html>
